<template>
  <div class="container">
    <ul class="btn-group">
      <li v-for="(item, i) in data.selectList" :key="i" class="btn btn-success" :class="{active: item.isActive}">
        <router-link :to=item.path @click="clickActive(item.head)">{{ item.head }}</router-link>
      </li>
    </ul>
    <!-- <h1 v-show="data.isHome">实习快乐！生活第一！</h1> -->

    <RouterView v-slot="{ Component }">
      <KeepAlive>
        <component :is="Component" :key="$route.name" v-if="$route.meta.keep"></component>
      </KeepAlive>
      <component :is="Component" :key="$route.name" v-if="!$route.meta.keep"></component>
    </RouterView>
    <!-- <RouterView></RouterView> -->
  </div>

</template>

<script setup>
import { reactive, onMounted } from "vue"
//引入store钩子
import useCounterStore from '@/stores/counter.js'
//实现仓库数据双向绑定
import {storeToRefs} from 'pinia'
import axios from "axios";

//创建仓库对象
const store=useCounterStore()
let {homeIndex}=storeToRefs(store)

const data = reactive({
  selectList:[
    // {
    //   head: "test",
    //   path: "/",
    //   isActive: false
    // },
    {
      head: "实习概况",
      path: "one-path",
      isActive: true
    },
    {
      head: "招聘模块",
      path: "two-path",
      isActive: false
    },
    {
      head: "签到",
      path: "three-path",
      isActive: false
    },
    {
      head: "留言板",
      path: "four-path",
      isActive: false
    }
  ],
  isHome: true
});

const clickActive = (i)=> {
  for (let item of data.selectList) {
    item.isActive = false
    item.isActive = item.head == i && true
    data.isHome = i == "test" ? true : false
  }
}


onMounted(()=> {
  clickActive(homeIndex.value)
})


</script>

<style scoped>
.container {
  background: #eee;
  box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
  padding: 20px 0;
  margin-top: 50px;
}
h1 {
  font-weight: 700;
  background: linear-gradient(270deg,#57FFFB 0%,#57A0FF 27.38%,#A263FF 49.29%,#FF63FD 75.41%,#FF6386 100%);
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
}
li {
  list-style: none;
}
li:hover a,
a {
  color: #fff;
  text-decoration: none;
}


</style>